<template>
	<view>
		<navbar :title="title"></navbar>
		<view class="info-box bgf">
			<view class="info-list fa">
				<view class="key">收货人</view>
				<input type="text" placeholder="请填写收货人姓名" v-model="contact" />
			</view>
			<view class="info-list fa">
				<view class="key">联系方式</view>
				<input type="number" placeholder="请填写手机号码" v-model="mobile" maxlength="11" />
			</view>
			<view class="info-list fa">
				<view class="key">所在小区</view>
				<view class="flex1 pr">
					<picker mode="selector" :range="communityList" :value="communityIndex" @change="communityChange">
						<view v-if="isCommunity == 1">请选择小区</view>
						<view v-else-if="isCommunity == 2">{{community}}</view>
						<view v-else>{{communityList[communityIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="info-list fa">
				<view class="key">所在楼栋</view>
				<view class="flex1 pr">
					<picker mode="selector" :range="buildingList" :value="buildingIndex" @change="buildingChange">
						<view v-if="isBuilding == 1">请选择楼栋</view>
						<view v-else-if="isBuilding == 2">{{building}}</view>
						<view v-else>{{buildingList[buildingIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="info-list fa">
				<view class="key">详细地址</view>
				<input class="flex1" type="text" placeholder="请填写小区、街道门牌号等信息" v-model="address" />
			</view>
		</view>
		<view class="default fa bgf" @click="setDefault">
			<image src="../../static/pick-fill.png" mode="" v-if="is_default"></image>
			<image src="../../static/pick.png" mode="" v-else></image>
			<view>设置为默认</view>
		</view>
		<view>
			<view class="operate-place"></view>
			<div class="operate-box fa">
				<view class="addbtn fa jcc fwb" @click="addConfirm">完成</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				id: '',
				contact: '',
				mobile: '',
				longitude: '',
				latitude: '',
				isCommunity: 1, //1未选择小区
				community: '',
				communityList: [],
				communityIdList: [],
				communityIndex: 0,
				isBuilding: 1, //1未选择楼栋
				building: '',
				buildingList: [],
				buildingIdList: [],
				buildingId: '',
				buildingIndex: 0,
				address: '',
				is_default: 0,
				estateId: ''
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.title = '编辑地址'
				this.getAddressDetail();
			} else {
				this.title = '添加地址'
				this.getLocation()
			}
		},
		methods: {
			getAddressDetail() {
				this.api.addressDetailFunc({
					accountAddressId: this.id
				}).then(res => {
					if (res.code == 200) {
						this.estateId = res.data.estate.estateId
						this.buildingId = res.data.building.buildingId
						this.contact = res.data.name
						this.mobile = res.data.phone
						this.address = res.data.details
						this.community = res.data.estate.name
						this.isCommunity = 2
						this.building = res.data.building.name
						this.isBuilding = 2
						this.is_default = res.data.isDefault
						this.api.communityListFunc({
							longitude: this.longitude,
							latitude: this.latitude
						}).then(res => {
							if (res.code == 200) {
								res.data.forEach(item => {
									this.communityList.push(item.address)
									this.communityIdList.push(item.estateId)
								})
							}
						})
						this.api.buildingListFunc({
							estateId: res.data.estate.estateId
						}).then(res => {
							if (res.code == 200) {
								res.data.forEach(item => {
									this.buildingList.push(item.name)
									this.buildingIdList.push(item.buildingId)
								})
							}
						})
					}
				})
			},
			getLocation() {
				uni.getLocation({
					success: result => {
						this.longitude = result.longitude
						this.latitude = result.latitude
						this.getCommunity()
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: '获取位置信息失败，请先打开手机定位功能',
							icon: 'none'
						})
					}
				})
			},
			// 获取小区列表
			getCommunity() {
				this.api.communityListFunc({
					longitude: this.longitude,
					latitude: this.latitude
				}).then(res => {
					if (res.code == 200) {
						res.data.forEach(item => {
							this.communityList.push(item.address)
							this.communityIdList.push(item.estateId)
						})
					}
				})
			},
			// 获取楼栋列表
			getBuilding() {
				this.api.buildingListFunc({
					estateId: this.estateId
				}).then(res => {
					if (res.code == 200) {
						res.data.forEach(item => {
							this.buildingList.push(item.name)
							this.buildingIdList.push(item.buildingId)
						})
					}
				})
			},
			communityChange(e) {
				let index = e.detail.value
				this.communityIndex = index
				this.estateId = this.communityIdList[index]
				this.isCommunity = 0
				this.getBuilding()
			},
			buildingChange(e) {
				if (this.isCommunity && !this.id) return uni.showToast({
					title: '请选择小区',
					icon: 'none'
				})
				let index = e.detail.value
				this.buildingIndex = index
				this.buildingId = this.buildingIdList[index]
				this.isBuilding = 0
			},
			setDefault() {
				this.is_default = this.is_default == 1 ? 0 : 1
			},
			addConfirm() {
				if (!this.contact) return uni.showToast({
					title: '请填写收货人姓名',
					icon: 'none'
				})
				if (!/^[1][3456789][0-9]{9}$/.test(this.mobile)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.isCommunity == 1) return uni.showToast({
					title: '请选择小区',
					icon: 'none'
				})
				if (this.isBuilding == 1) return uni.showToast({
					title: '请选择楼栋',
					icon: 'none'
				})
				if (!this.address) return uni.showToast({
					title: '请填写详细地址',
					icon: 'none'
				})
				if (this.id) {
					this.api.addressUpdateFunc({
						accountAddressId: this.id,
						name: this.contact,
						phone: this.mobile,
						estateId: this.estateId,
						buildingId: this.buildingId,
						details: this.address,
						isDefault: this.is_default
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							uni.showToast({
								title: res.msg || '操作失败',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					})
				} else {
					this.api.addressAddFunc({
						name: this.contact,
						phone: this.mobile,
						estateId: this.estateId,
						buildingId: this.buildingId,
						details: this.address,
						isDefault: this.is_default
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-box {
		margin-top: 20rpx;
		padding: 30rpx 30rpx 2rpx;

		.info-list {
			margin-bottom: 48rpx;

			.key {
				width: 160rpx;
			}

			.region {
				color: #808080;
			}

			.picked {
				color: #333;
			}

			.community-place {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	.default {
		margin-top: 20rpx;
		padding: 20rpx;

		image {
			margin-right: 10rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}

	.operate-place {
		height: calc(env(safe-area-inset-bottom) + 140rpx);
	}

	.operate-box {
		position: fixed;
		bottom: 0;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		right: 0;
		padding: 0 30rpx;
		height: 110rpx;
		background: #f8f8f8;
		z-index: 999;

		.addbtn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			color: #fff;
			background: linear-gradient(270deg, #6CE083 0%, #3DBF63 100%);
		}
	}
</style>